<template>
    <div class="m-ranking-wrapper" :style="'background-image:' + 'url('+ picList.spiritPage +')'">
        <div class="m-ranking-inner" :style="'background-image:' + 'url('+ picList.rankingInnerPage +')'">
            <div class="m-user-info">
                <div class="m-user-avatar">
                    <img style="width:2rem;height:2rem;" :src="userinfo.face" alt="avatar">
                </div>
                <div class="m-user-level">
                    <span class="m-alias">{{ userinfo.username }}</span>
                </div>
            </div>
            <div class="m-user-rank">{{ myRanking }}</div>
            <div class="m-user-history-rank">
                <span class="m-title">历史最高分</span>
                <span>{{ theHighest }}</span>
            </div>
            <div class="m-rank-player-group">
                <div>
                    <div class="m-rank-player-box" v-for="(player,index) in rankingList" :key="index">
                        <img :src="player['user']['face']" class="m-player-avatar" alt="">
                        <span class="m-player-name">{{ player['user']['username'] }}</span>
                        <span class="m-player-challenge"
                              @click="goPlayerPage(player['user']['id'],player['user']['username'])">查看</span>
                    </div>
                </div>
                <div style="text-align: center;">
                    <span @click="goPrev($event)" :class="{ 'm-readonly': page === 1, 'm-canread': page !== 1}">{{ page === 1 ? '首页': '上一页' }}</span>&nbsp;&nbsp;
                    <span :class="{'m-readonly': page === totalPage, 'm-canread': page !== totalPage}"
                          @click="goNext($event)">{{ page !== totalPage ? '下一页' : '到底了' }}</span>
                </div>
            </div>
        </div>
        <div class="m-goBack" @click="goBack()"></div>
    </div>
</template>

<script>
export default {
  name: "Ranking",
  data() {
    return {
      avatar: "../assets/logo.png",
      level: 99,
      alias: "哈哈哈",
      rank: 99,
      historyRank: 999,
      players: [
        {
          name: "aaa",
          goin: 99,
          rank: 9,
          avatar:
            ""
        },
        {
          name: "aaa",
          goin: 99,
          rank: 9,
          avatar:
            ""
        },
        {
          name: "aaa",
          goin: 99,
          rank: 9,
          avatar:
            ""
        }
      ],
      userinfo: {},
      token: "",
      token1: "xr5uGjGYbcqCXXUziqWOfzwPO14vMsM85SKPAnppkVQMjUHpW8yKyVZSnSou",
      page: 1,
      pagesize: 3,
      rankingList: [],
      myRanking: null,
      theHighest: null,
      total: null,
      totalPage: null
    };
  },
  created() {
    this.token = window.localStorage.getItem("token");
    this.userinfo = JSON.parse(window.localStorage.getItem("user"))
      ? JSON.parse(window.localStorage.getItem("user"))
      : {};
    this.getRankingList();
  },
  methods: {
    enCodeLocalUrl(url) {
      return window.encodeURIComponent(url); // url必须动态获取，不能缓存
    },
    share() {
      let link = this.enCodeLocalUrl(window.location.href.split("#")[0]);
      this.wxShare(
        "排行",
        "排行页面",
        link,
        "https://o3e85j0cv.qnssl.com/tulips-1083572__340.jpg"
      );
    },
    goPrev(e) {
      e.preventDefault();
      if (this.page > 1) {
        this.page--;
        this.getRankingList();
      }
    },
    goNext(e) {
      e.preventDefault();
      if (this.totalPage !== this.page) {
        this.page++;
        this.getRankingList();
      }
    },
    getRankingList() {
      this.$http
        .get(
          "http://api.rjveg.pw/api/ranking/list?token=" +
            this.token +
            "&page=" +
            this.page +
            "&pagesize=" +
            this.pagesize
        )
        .then(res => {
          let data = res.data;
          if (data.code == 200) {
            this.myRanking = data.data.myRanking;
            this.theHighest = data.data.theHighest;
            this.rankingList = data.data.rankingdata.data;
            this.total = data.data.rankingdata.total;
            this.totalPage = Math.ceil(this.total / this.pagesize);
          }
        });
    },
    goPlayerPage(id, name) {
      this.$store.commit("SETSHAREINFO", { id: id, name: name });
      this.$router.push({
        path: "/?pId=" + id
      });
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped lang="less">
.m-readonly {
  background: #ccc;
}

.m-canread {
  background: -moz-linear-gradient(top, greenyellow 0%, lightseagreen 100%);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, greenyellow),
    color-stop(100%, lightseagreen)
  );
  background: -webkit-linear-gradient(top, greenyellow 0%, lightseagreen 100%);
  background: -o-linear-gradient(top, greenyellow 0%, lightseagreen 100%);
  background: -ms-linear-gradient(top, greenyellow 0%, lightseagreen 100%);
  background: linear-gradient(to bottom, greenyellow 0%, lightseagreen 100%);
}

.m-user-level {
  margin-left: 0.2rem;
}

.m-rank-player-group {
  width: 8rem;
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);

  & > div:nth-child(1) {
    height: 100%;
    overflow: hidden;
    position: relative;
    padding: 0 0.35rem;
  }
  & > div:nth-child(2) {
    span {
      padding: 0.1rem 0.3rem;
      color: #fff;
      border-radius: 20px;
      font-size: 0.3rem;
    }
  }
  .m-rank-player-box {
    border: 0.0133rem dashed orange;
    font-size: 0.3rem;
    color: orange;
    width: 2.4rem;
    float: left;
    box-sizing: border-box;
    padding: 0.1rem;
    .m-player-name {
      width: 100%;
      margin-top: 0.1rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      background: -moz-linear-gradient(top, orange 0%, red 100%);
      background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0%, orange),
        color-stop(100%, red)
      );
      background: -webkit-linear-gradient(top, orange 0%, red 100%);
      background: -o-linear-gradient(top, orange 0%, red 100%);
      background: -ms-linear-gradient(top, orange 0%, red 100%);
      background: linear-gradient(to bottom, orange 0%, red 100%);
      color: #fff;
      text-align: center;
    }
    .m-player-avatar {
      width: 2rem;
      height: 2rem;
    }
    .m-player-challenge {
      width: 80%;
      font-size: 0.3rem;
      text-align: center;
      border-radius: 0.3rem;
      margin-top: 0.1rem;
      background: -moz-linear-gradient(top, greenyellow 0%, lightseagreen 100%);
      background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0%, greenyellow),
        color-stop(100%, lightseagreen)
      );
      background: -webkit-linear-gradient(
        top,
        greenyellow 0%,
        lightseagreen 100%
      );
      background: -o-linear-gradient(top, greenyellow 0%, lightseagreen 100%);
      background: -ms-linear-gradient(top, greenyellow 0%, lightseagreen 100%);
      background: linear-gradient(
        to bottom,
        greenyellow 0%,
        lightseagreen 100%
      );
      color: #fff;
    }
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
  }
}

.m-ranking-inner {
  width: 9rem;
  height: 16rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.m-ranking-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.m-user-info {
  width: 8rem;
  display: flex;
  position: absolute;
  left: 1rem;
  top: 3rem;
  height: 2rem;
  box-sizing: border-box;
  padding-left: 0.5rem;
  .m-level {
    font-size: 0.5rem;
    color: orange;
  }
  .m-alias {
    color: #fff;
    background: purple;
    padding: 0.1rem 0.2rem;
    font-size: 0.3rem;
  }
}

.m-user-rank {
  position: absolute;
  left: 50%;
  top: 6.2rem;
  font-size: 0.6rem;
  color: purple;
}

.m-user-history-rank {
  position: absolute;
  left: 22%;
  top: 7.7rem;
  .m-title {
    display: inline-block;
    font-size: 0.45rem;
    font-weight: 700;
    font-family: "YouYuan";
    background-image: -webkit-gradient(
      linear,
      left center,
      right center,
      from(rgba(176, 31, 184, 1)),
      to(rgba(255, 89, 76, 1))
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.m-user-history-rank span:nth-child(2) {
  padding-left: 0.1rem;
  color: purple;
  font-size: 0.5rem;
}

.m-goBack {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  left: 0.1rem;
  bottom: 0.7rem;
  background-image: url("../assets/images/back_icon.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>
